<!DOCTYPE html>
<html lang="en">
<head>

    {% block title %}

    {% endblock %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Free HTML5 Website Template by ProBootstrap.com"/>
    <meta name="keywords"
          content="free bootstrap 4, free bootstrap 4 template, free website templates, free html5, free template, free website template, html5, css3, mobile first, responsive"/>
    <meta name="author" content="ProBootstrap.com"/>

    <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">

    <link rel="stylesheet" href="/static/a_css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/a_css/open-iconic-bootstrap.min.css">

    <link rel="stylesheet" href="/static/a_css/owl.carousel.min.css">
    <link rel="stylesheet" href="/static/a_css/owl.theme.default.min.css">

    <link rel="stylesheet" href="/static/a_css/icomoon.css">
    <link rel="stylesheet" href="/static/a_css/animate.css">
    <link rel="stylesheet" href="/static/a_css/style.css">
    <script>
        function search(){
        var val = document.getElementById('search').value
             console.log(val);
        }
</script>

</head>

<body>

<aside class="probootstrap-aside js-probootstrap-aside">
    <a href="#" class="probootstrap-close-menu js-probootstrap-close-menu d-md-none"><span
            class="oi oi-arrow-left"></span> Close</a>
    <div class="probootstrap-site-logo probootstrap-animate" data-animate-effect="fadeInLeft">
        <p class="mb-0"><input id="search" name="search" placeholder="输入标题或关键字"></p>
        <button onclick="search()" class="mb-2 d-block probootstrap-logo">搜索</button>
    </div>

    <div class="probootstrap-overflow">
        <nav class="probootstrap-nav">
            <ul>
                <li class="probootstrap-animate {% if flag == 1 %}active{% endif %}" data-animate-effect="fadeInLeft"><a
                        href="{% url 'show:a_index' %}">首页</a></li>
                <li class="probootstrap-animate {% if flag == 2 %}active{% endif %}" data-animate-effect="fadeInLeft"><a
                        href="{% url 'show:a_about' %}">作者</a></li>
                <li class="probootstrap-animate {% if flag == 3 %}active{% endif %}" data-animate-effect="fadeInLeft"><a
                        href="{% url 'show:a_tag' %}">标签</a>
                </li>
                {% if user.id %}
                <li class="probootstrap-animate" data-animate-effect="fadeInLeft"><a href="{% url 'myblog:article' %}">后台</a>
                </li>
                {% endif %}
            </ul>
        </nav>
        <footer class="probootstrap-aside-footer probootstrap-animate" data-animate-effect="fadeInLeft">
            <ul class="list-unstyled d-flex probootstrap-aside-social">
                <!--<li><a href="#" class="p-2"><span class="icon-twitter"></span></a></li>
                <li><a href="#" class="p-2"><span class="icon-instagram"></span></a></li>
                <li><a href="#" class="p-2"><span class="icon-dribbble"></span></a></li>-->
            </ul>
            <p>&copy; 2017 ProBootstrap:Aside. <br> All Rights Reserved. More Templates </p>
        </footer>
    </div>
</aside>


<main role="main" class="probootstrap-main js-probootstrap-main">
    <div class="probootstrap-bar">
        <a href="#" class="probootstrap-toggle js-probootstrap-toggle"><span class="oi oi-menu"></span></a>
        <div class="probootstrap-main-site-logo"><a href="index.html">Aside</a></a></div>
    </div>

    {% block content %}
    {% endblock %}

</main>

<script src="/static/a_js/jquery-3.2.1.slim.min.js"></script>
<script src="/static/a_js/popper.min.js"></script>
<script src="/static/a_js/bootstrap.min.js"></script>
<script src="/static/a_js/owl.carousel.min.js"></script>
<script src="/static/a_js/jquery.waypoints.min.js"></script>
<script src="/static/a_js/imagesloaded.pkgd.min.js"></script>
<script src="/static/a_js/main.js"></script>
<script>
        function search(){
            var val = $("#search").val()
            window.location.href= '/show/search/?name='+val;
        }
    </script>

</body>
</html>